.eightbox {
    width: 100%;
    height: 100%;
    background: url(https://qnm.hunliji.com/o_1e4bi1mrp1pqc4crkf51uib5qk11.jpg) no-repeat;
    background-size: cover;
    overflow: hidden;
    position: relative;

    .eightmainbox {
        width: 80%;
        height: 72%;
        // background-color: aqua;
        background: url(./images/bj2.jpg) no-repeat;
        background-size: cover;
        margin: 0 auto;
        margin-top: 0.5rem;
        opacity: 0;
        animation: bj10 3s 1s forwards;

        @keyframes bj10 {
            from {
                opacity: 0;
                transform: translateY(-200px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

    }

    .xtbox {
        position: absolute;
        width: 80%;
        left: 10%;
        top: 0%;
        height: 72%;
        margin: 0 auto;
        box-sizing: border-box;
        margin-top: 0.5rem;
        border: 1px solid rgb(239, 205, 118);
        animation: xiantiao 2s forwards;
        opacity: 0;

        @keyframes xiantiao {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }

    .eightfont {
        position: absolute;
        width: 0.7rem;
        height: 0.55rem;
        background: url(./images/zi1.png) no-repeat;
        background-size: cover;
        z-index: 1;
        right: 20%;
        bottom: 5%;
        opacity: 0;
        animation: font10 3s 3.5s forwards;

        @keyframes font10 {
            from {
                opacity: 0;
                transform: translateX(50px);
            }

            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    }
}